<template>
  <div class="books-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>图书管理</span>
          <el-button
            v-if="hasLibrarianRole"
            type="primary"
            @click="showAddDialog = true"
          >
            添加图书
          </el-button>
        </div>
      </template>
      
      <el-table :data="books" style="width: 100%">
        <el-table-column prop="title" label="书名" />
        <el-table-column prop="author" label="作者" />
        <el-table-column prop="isbn" label="ISBN" />
        <el-table-column prop="totalCopies" label="总数量" />
        <el-table-column prop="availableCopies" label="可借数量" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              v-if="!hasLibrarianRole"
              type="primary"
              size="small"
              @click="borrowBook(scope.row)"
              :disabled="scope.row.availableCopies <= 0"
            >
              借阅
            </el-button>
            <el-button
              v-if="hasLibrarianRole"
              type="danger"
              size="small"
              @click="deleteBook(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加图书对话框 -->
    <el-dialog
      v-model="showAddDialog"
      title="添加图书"
      width="30%"
    >
      <el-form :model="newBook" label-width="80px">
        <el-form-item label="书名">
          <el-input v-model="newBook.title" />
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="newBook.author" />
        </el-form-item>
        <el-form-item label="ISBN">
          <el-input v-model="newBook.isbn" />
        </el-form-item>
        <el-form-item label="数量">
          <el-input-number v-model="newBook.totalCopies" :min="1" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showAddDialog = false">取消</el-button>
          <el-button type="primary" @click="addBook">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { computed, ref, onMounted } from 'vue'
import axios from 'axios'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus' 

export default {
  setup() {
    const store = useStore()
    const books = ref([])
    const showAddDialog = ref(false)
    const newBook = ref({
      title: '',
      author: '',
      isbn: '',
      totalCopies: 1
    })

    const hasLibrarianRole = computed(() => {
      return store.state.user.roles.some(role => role.name === 'ROLE_ADMIN')
    })

    const loadBooks = async () => {
      try {
        const response = await axios.get('/api/books')
        books.value = response.data
      } catch (error) {
        ElMessage.error('获取图书列表失败')
      }
    }

    const addBook = async () => {
      try {
        await axios.post('/api/books', newBook.value)
        ElMessage.success('添加成功')
        showAddDialog.value = false
        loadBooks()
      } catch (error) {
        ElMessage.error('添加失败')
      }
    }

    const borrowBook = async (book) => {
      try {
        await axios.post(`/api/borrow/${book.id}`)
        ElMessage.success('借阅成功')
        loadBooks()
      } catch (error) {
        ElMessage.error('借阅失败')
      }
    }

    onMounted(() => {
      loadBooks()
    })

    return {
      books,
      showAddDialog,
      newBook,
      hasLibrarianRole,
      addBook,
      borrowBook
    }
  }
}
</script> 